/* 定义变量 */
@color: red;
#header {
	color: @color;
}

h2 {
	color: @color;
}

/* 定义一个类 */
.rounderCorners(@radius:5px){
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

@width: 350px;
@height: 280px;
@marginTop: 10px;
/* 定义的类应用在另一个类中 */
#roundHead {
	width:@width;
	height:@height;
	margin-top:@marginTop;
	background-color:lightgreen;
	.rounderCorners
}
#roundFoot {
	width:@width;
	height:@height;
	margin-top:@marginTop;
	background-color:lightblue;
	.rounderCorners(10px);
}

/* 无参mixins */
.wrap(){
	text-wrap: wrap;
	white-space: pre-wrap;
	white-space:-moz-pre-wrap;
	word-wrap: break-word;
}
pre {
	.wrap
}

/* arguments 使用 */
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000) {
	-moz-box-shadow: @arguments;
	-webkit-box-shadow: @arguments;
	box-shadow: @arguments;
}

#header {
	.boxShadow(2px,2px,3px,#f36);
}


/* Nested Rules */
#nheader{
	display: inline;
	float: left;
	h1 {
		font-size: 26px;
		font-weight: bold;
		a {
			text-decoration: none;
			color: #f36;
			&:hover {
				text-decoration: underline;
				color:#63f;
			}
		}
	}
	p{
		font-size: 12px;
	}

}

/* Functions & Operations */
@the-border: 1px;
@base-color: #111;
@red: #842210;
#foheader{
	color: @base-color * 3;
	border: 1px solid desaturate(@red, 100%);
	border-width: @the-border @the-border*2 @the-border*3 @the-border;
	border-color: desaturate(@red, 100%) @red lighten(@red,10%) darken(@red,30%);
}

@var: 20px;
#cheader {
	width: @var + 5 * 2;
	height: (@var + 5) *2;
}



